<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>vuestudy</title>
    <meta name="author" content="vuestudy"/>
    <meta name="description" content="vuestudy"/>
    <meta name="keywords" content="vuestudy"/>
    <meta name="Resource-type" content="Document"/>
	
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<link href="css/style.css" rel="stylesheet" type="text/css"  />

</head>
<body>
<div id="myApp">
  <p>{{ message }}</p>
  <p>{{ message | toupper }}</p>
  <hr>
  <p>现在的vue.js学习进度是{{num}}({{num | topercentage}})</p>
  
  <div v-if="seen">快看我！</div>

  <ol>
	<li v-for="(game, index) in games">
		{{ game.title }}/{{game.price}}元
	</li>
  </ol>
  <ul>
      <li v-for="(game, index) in games">({{index}}) {{game.title}} / 售价：{{game.price}}元</li>
  </ul>
	<h1>JS对象迭代</h1>
    <div v-for="(value, key) in gameObjs" >
        {{ key }} : {{ value }}
    </div>
  
  <p>您最喜欢的游戏是：{{mygame}}</p>
   <input v-model="mygame">
   <p>您的爱好是：{{myfaver}}</p>
   <select v-model="myfaver">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
   </select>
   </br>
   <p>您最喜欢的游戏是：{{mygame}}</p>
    <button v-on:click="btnClick('我的世界')">我的世界</button>
    <button v-on:click="btnClick('勇者斗恶龙')">勇者斗恶龙</button>
    <button v-on:click="btnClick('塞尔达传说')">塞尔达传说</button>
    <button @click="btnClick('魔界战记5')">魔界战记5</button>
	
	<ul>
		<game-item v-for="item in games" v-bind:game="item" ></game-item>
	</ul>
	<p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
	<button @click="addbtnClick(10000)">加价10000円</button>
	<div v-bind:class="{active:isActive}">红色文本1</div>
    <div :class="{active:isActive}">红色文本2</div>
    <button @click="classbtnClick">改变class吧</button>
	<div :class="myClass">红色文本</div>
    <button @click="mybtnClick">改变class吧</button>
	
	<h1 v-if="result == 0">成绩未公布</h1>
    <h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1>
    <h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1>
    <h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1>
    <button @click="ifbtnClick">考试成绩</button>
	
	<br />
	
	<h1 v-show="show">任天堂新一代主机Switch</h1>
	<button @click="showbtnClick">显示</button>
	
	<h1>事件处理器</h1>
    <input id="txtName" v-on:keyup="txtKeyup($event)">
    <button id="btnOK" v-on:click="txtbtnClick($event)">OK</button>
	
	<h1>表单控件绑定</h1>
    <input type="text" v-model="message" placeholder="来呀，编辑我吧！">
    <p>Message is: {{ message }}</p>
    <textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
	
	<h1>表单复选框</h1>
    <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">
    <label for="生化危机7">生化危机7</label>
    <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
    <label for="模拟飞行">模拟飞行</label>
    <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
    <label for="塞尔达传说">塞尔达传说</label>
    <br>
    <p>您选择的游戏是: {{ checkedGames }}</p>
	
	<h1>表单单选按钮</h1>
    <h3>选择性别</h3>
    <input type="radio" id="male" value="男" v-model="pickedSex">
    <label for="male">男</label>
    <br>
    <input type="radio" id="female" value="女" v-model="pickedSex">
    <label for="female">女</label>
    <h3>选择爱好</h3>
    <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
    <label for="game">玩游戏</label>
    <br>
    <input type="radio" id="movie" value="看电影" v-model="pickedHobby">
    <label for="movie">看电影</label>
    <h3>选择结果</h3>
    <p>性别: {{ pickedSex }}</p>
    <p>爱好: {{ pickedHobby }}</p>
	
	  <h3>你最喜欢的NBA球星是：</h3>
    <select v-model="likedNBAStar" style="width:210px;">
        <option>科比</option>
        <option>詹姆斯</option>
        <option>哈登</option>
        <option>库里</option>
        <option>杜兰特</option>
    </select>

    <h3>我的全明星：</h3>
    <select v-model="likedNBAStars" multiple style="width:210px;height:210px;">
        <option>阿德托昆博</option>
        <option>怀特赛德</option>
        <option>阿尔德里奇</option>
        <option>戴维斯</option>
        <option>格里芬</option>
        <option>詹姆斯</option>
        <option>杜兰特</option>
        <option>巴特勒</option>
        <option>德罗赞</option>
        <option>哈登</option>
        <option>科比</option>
        <option>韦德</option>
        <option>伦纳德</option>
        <option>库里</option>
        <option>欧文</option>
        <option>保罗</option>
        <option>林树豪</option>
    </select>

    <h3>选择结果</h3>
    <p>我最最喜欢: {{ likedNBAStar }}</p>
    <p>我的全明星: {{ likedNBAStars }}</p>
	
	 <h1>用户注册</h1>
    
    <div>
        <label for="username">用户：</label>
        <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
        <span v-if="checkUsernameOK">可注册</span>
    </div>
    <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" v-model.number="age">
    </div>
    <div>
        <label for="content">个人简介：</label><br/>
        <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
    </div>
    
    <h4>信息区</h4>
    <p>{{username}}</p>
    <p>{{age}}</p>
    <p><pre>{{content}}</pre></p>
	
	 <today-weather></today-weather>
	 <my-weather></my-weather>
	 
	  <h1>2017年最期待的游戏是：</h1>
    <table border="1">
    	<my-row0></my-row0>
        <my-row1></my-row1>
        <my-row2></my-row2>
        <my-row3></my-row3>
	
    </table>
	
	<div>今天的天气是<today-weather/></div>
	
	<h1>您的成绩评价</h1>
    <test-result :score="50"></test-result>
    <test-result :score="65"></test-result>
    <test-result :score="90"></test-result>
    <test-result :score="100"></test-result>
	

	

		<h1>身世之谜</h1>
    <show-member-info sname="koma" :sage="25" :sdetail="{address:'earth', language:'世界语'}"></show-member-info>
	
	 <h1>人生加法</h1>
    <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
    <hr/>
    <h3>{{aresult}}</h3>
	
	<say-to pname="koma">
        你的视频做的太差了。
    </say-to>
    <say-to pname="mike">
        你千万不要学koma。
    </say-to>
    <say-to pname="john">
        你教教他们两个吧。
    </say-to>
	
	<nba-all-stars c="奥尼尔" pf="加内特">
        <span slot="sf">皮尔斯</span>
        <span slot="sg">雷阿伦</span>
        <span slot="pg">隆多</span>
    </nba-all-stars>
</div>


<script type="text/javascript">

	/* 组件定义: game-item */
	Vue.component('game-item',{
		props: ['game'],
		template: '<li>{{game.title}}</li>'
	});
	
	 Vue.component('today-weather', {
        template: '<div>今天下雨，出不去啦，干什么呢？看Youtube吧!</div>'
    });
	  
	Vue.component('my-row0', {
        template: '<th><td>编号</td><td>游戏名称</td></th>'
    }); 
	Vue.component('my-row1', {
        template: '<tr><td>(1)</td><td>塞尔达传说:荒野之息(3/3)</td></tr>'
    });    
    Vue.component('my-row2', {
        template: '<tr><td>(2)</td><td>新马里奥赛车(4/28)</td></tr>'
    });    
    Vue.component('my-row3', {
        template: '<tr><td>(3)</td><td>喷射乌贼娘2代</td></tr>'
    }); 
	
	var WeatherComponent = {
		template: '<div>今天下雨，随它去吧！</div>'
	};
	
	 Vue.component('today-weather', {
        template: '<strong>{{todayWeather}}</strong>',
        data: function(){
            return {
                todayWeather: '雨加雪'
            };
        }
    });
	
	Vue.component('test-result', {
        props: ['score'],
        template: '<div><strong>{{score}}分，{{testResult}}</strong></div>',
        computed: {
            testResult: function() {
                var strResult = "";
                if (this.score < 60)
                    strResult = "不及格";
                else if (this.score < 90)
                    strResult = "中等生";
                else if (this.score <= 100)
                    strResult = "优秀生";
                return strResult;
            }
        }
    });
	/*
	Vue.component('say-hello', {
        props: ['ppname'],
        template: '<div>你好，<strong>{{ppname}}</strong>！</div>',
    });
	*/
	Vue.component('show-member-info', {
        props: {
            sname: {
                type: String,
                required: true,
            },
            sage: {
                type: Number,
                validator: function (value) {
                    return value >= 0 && value <= 130;
                }                
            },
            sdetail: {
                type: Object,
                default: function() {
                    return {
                        address: 'US',
                        language: 'English',
                    };
                }
            },
        },
        template: '<div>姓名：{{this.sname}}<br/>' 
            + '年龄：{{this.sage}}岁<br/>'
            + '地址：{{this.sdetail.address}}<br/>'
            + '语言：{{this.sdetail.language}} </div>',
    });
	
	 Vue.component('add-method', {
        props: ['a', 'b'],
        template: '<div><button v-on:click="add">加吧</button></div>',
        methods: {
            add: function(){
                var value = 0;
                value = this.a + this.b;
                this.$emit('add_event', {
                    aresult:value
                });
            }
        },
    });
	
	Vue.component('say-to', {
        props: ['pname'],
        template: '<div>'
            + '你好，<strong>{{pname}}</strong>！'
            + '<slot></slot>'
            + '</div>',
    });
	
	Vue.component('nba-all-stars', {
        props: ['c', 'pf'],
        template: '<div>'
            + '<div>中锋：{{c}}</div>'
            + '<div>大前：{{pf}}</div>'
            + '<div>小前：<slot name="sf"></slot></div>'
            + '<div>分卫：<slot name="sg"></slot></div>'
            + '<div>控卫：<slot name="pg"></slot></div>'
            + '</div>',
    });
	
	
	/* Vue对象实例化 */
	var myApp = new Vue({
		el: '#myApp',
		data: {
		    mmyname: 'Koma',
			message: 'Hello Vue.js World!',
			num: 0.3,
			seen: true,
			price: 29980,
			priceInTax: 0,
            priceChinaRMB: 0,
			isActive: false,
			result: 0,
			aresult: 0,
			show:true,
			myClass: {
                active: true,
                big: true,
            },
		message: "我爱马里奥",
		games:[
			{title:'勇者斗恶龙',price:400},
			{title:'超级马里奥',price:380},
			{title:'我的世界',price:99},
			],
		gameObjs:{
			title: "乌贼娘2代",
            price: 350,
            pubdate: "2017年夏季",
            category: "射击",
            agerange: "全年龄",
		},
		 mygame: '超级马里奥',
		 myfaver: '打篮球',
		 checkedGames: [],
		 pickedSex: "",
         pickedHobby: "",
		 likedNBAStar: null,
         likedNBAStars: [],
		    username: "",
            checkUsernameOK: false,
            age: "",
            content: "",
		},
		methods:{
				btnClick: function(pname){
					this.mygame = pname;
				},
				addbtnClick: function(newPrice){
					this.price += newPrice;
				},
				classbtnClick: function(){
					this.isActive = true;
				},
				mybtnClick: function(){
					this.myClass.big = false;
				},
				ifbtnClick: function(){
					this.result = Math.round(Math.random() * 100);
				},
				showbtnClick: function(){
					this.show = !this.show;
				},
				txtKeyup: function(event){
					this.debugLog(event);
				},
				txtbtnClick: function(event){
					this.debugLog(event);
				},
				debugLog:function(event){
					console.log(
						event.srcElement.tagName, 
						event.srcElement.id, 
						event.srcElement.innerHTML, 
						event.key?event.key:""
					);
				},
			checkUsername: function(){
                if (this.username.length > 0) this.checkUsernameOK = true;
                else this.checkUsernameOK = false;
            },
			getAddResult: function(pval){
                this.aresult = pval.aresult;
            },
		},
		watch: {
            price: function(newVal, oldVal){
                console.log(newVal, oldVal);
                this.priceInTax = Math.round(this.price * 1.08);
                this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
            },
        },
		filters: {
			toupper: function(value){
				return value.toUpperCase();
			},
			topercentage: function(value){
				return value * 100 + '%';
			}
		},
		components:{
			'my-weather': WeatherComponent
		},
		/*
		computed:{
			priceInTax: function(){
				return this.price * 1.08;
			},
			priceChinaRMB: function(){
				return Math.round(this.priceInTax / 16.75);
			},
		}*/
	});
</script>
</body>
</html>